<template>
  <div class="basic-box">
    <el-form
      :model="shopForm"
      :rules="shopRules"
      ref="shopForm"
      size="small"
      label-position="right"
      label-width="130px"
    >
      <div class="basic-box-title">{{ basicTitleData.typeTitle }}</div>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="商户门头照片:" prop="merchantDoor">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpmerchantDoorRequest"
              :limit="1"
              :file-list="merchantDoorList"
              :on-remove="merchantDoorRemove"
              :before-remove="beforemerchantDoorRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内景照片:" prop="interior">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpinteriorRequest"
              :limit="1"
              :file-list="interiorList"
              :on-remove="interiorRemove"
              :before-remove="beforeinteriorRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收银台照片:" prop="checkoutCounter">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpCheckoutCounterRequest"
              :limit="1"
              :file-list="checkoutCounterList"
              :on-remove="checkoutCounterRemove"
              :before-remove="beforecheckoutCounterRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </div>
</template>

<script>
import { uploadPrivate } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    shopForm: Object,
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      basicTitleData: {
        typeTitle: "门店照片",
      },
      shopRules: {
        merchantDoor: [
          { required: true, message: "请上传商户门头照片", trigger: "blur" },
        ],
        interior: [
          { required: true, message: "请上传内景照片", trigger: "blur" },
        ],
        checkoutCounter: [
          { required: true, message: "请上传收银台照片", trigger: "blur" },
        ]
      },
      merchantDoorList: [],
      interiorList: [],
      checkoutCounterList: [],
    };
  },
  created() {
  },
  methods: {
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 商户门头上传 */
    httpmerchantDoorRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.merchantDoor = res.data.data.name;
        this.$refs.shopForm.validateField("merchantDoor");
      });
    },
    /* 商户门头删除 */
    merchantDoorRemove(file, fileList) {
      this.merchantDoorList = fileList;
      this.shopForm.merchantDoor = "";
    },
    beforemerchantDoorRemove() {
      return this.$confirm(`确定移除商户门头照片？`);
    },
    /* 内景照片上传 */
    httpinteriorRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.interior = res.data.data.name;
        this.$refs.shopForm.validateField("interior");
      });
    },
    /* 内景照片删除 */
    interiorRemove(file, fileList) {
      this.interiorList = fileList;
      this.shopForm.interior = "";
    },
    beforeinteriorRemove() {
      return this.$confirm(`确定移除内景照片？`);
    },
    /* 收银台照片上传 */
    httpCheckoutCounterRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.checkoutCounter = res.data.data.name;
        this.$refs.shopForm.validateField("checkoutCounter");
      });
    },
    /* 收银台照片删除 */
    checkoutCounterRemove(file, fileList) {
      this.checkoutCounterList = fileList;
      this.shopForm.checkoutCounter = "";
    },
    beforecheckoutCounterRemove() {
      return this.$confirm(`确定移除收银台照片？`);
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-box {
  padding: 20px 40px 20px 0;
  .basic-box-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }
}
.basic-margin-top {
  margin-top: 40px;
}
</style>